<template>
    <view class="homepage">
        <view style="overflow: auto;background-color: #ffffff;">
            <view>
                <view class="perpagebg">
                    <view class="useravantor">
                        <view class="ele">
                            <view class="child">
                                <view class="child2">
                                    <image style="" :src="userinfo.userUrl" mode="aspectFill"></image>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="user-info-box">
                        <view class="name">
                            <text>{{userinfo.name}}</text>
                        </view>
                        <view class="bmzw">
                            <text>{{userinfo.deptName}}</text>
                        </view>
                        <view class="xx">
                            <text>湖南三一工业职业技术学院</text>
                        </view>
                    </view>
                    <view class="gzfshz" style="justify-content: space-between;">
                        <view style="display: flex;">
                            <view class="gz ">
                                <text>{{usercount.countFollowing}}</text>
                                <text>关注</text>
                            </view>
                            <view class="gz a-a">
                                <text>{{usercount.countFollower}}</text>
                                <text>粉丝</text>
                            </view>
                            <view class="gz a-a">
                                <text>{{usercount.countLike}}</text>
                                <text>获赞</text>
                            </view>
                        </view>
                        <view style="display: flex;justify-content: center;align-items: center;padding-right: 10rpx;">
                            <!-- <button class="cu-btn block line-orange sm" @tap="f_settint">
                            </button> -->
                            <text class="cuIcon-settings" style="font-size: 60rpx;color: #ffffff;padding-right: 20rpx;"
                                @tap="f_settint"></text>
                        </view>
                    </view>
                </view>
                <!-- <view class="qiun-columns" v-if="Radardata.length>0">
                    <canvas :style="{ width: cWidth + 'px', height: cHeight + 'px' }" canvas-id="canvasRadar"
                        id="canvasRadar" class="charts" @touchstart="touchRadar"></canvas>
                </view> -->
                <view class="qiun-columns" v-if="Radardata.length>0">
                    <canvas :style="{ width: cWidth + 'px', height: cHeight + 'px' }" canvas-id="canvasRadar"
                        id="canvasRadar" class="charts" @touchstart="touchRadar"></canvas>
                </view>
                <view class="dtlist" v-if="list.length>0">
                    <view class="dtitem" v-for="(a,index) in list" :key="index" v-if="list.length>0">
                        <view class="itemleft">
                            <view class="dtinfo">
                                <view class="dtr">
                                    <view class="dtrl" style="display: flex;flex: 1;align-items: center;"
                                        @click="f_gohomepage(a.userId)">
                                        <u-avatar size="80" :src="a.userUrl" mode="circle">
                                        </u-avatar>
                                        <view class="sjdd"
                                            style="flex-direction: column;justify-content: flex-start;flex: 1;align-items: flex-start;padding-left: 10rpx;text-align: center;">
                                            <view>
                                                <text class="name">{{a.userName}}</text>
                                            </view>
                                            <view style="display: flex;align-items: center;">
                                                <text style="text-align: left;">{{a.createTime}}<text
                                                        v-if="a.address!=''">.</text>{{a.address}}</text>
                                            </view>
                                        </view>
                                    </view>
                                    <view class="dtrr">
                                        <view class="fle align-center margin-right">
                                            <text v-if="a.likelength>0"
                                                class="dzsl padding-right10">{{a.likelength}}</text>
                                            <text @click="f_like(a,index)" :class="a.myLike?'txt-red':''"
                                                class="cuIcon-appreciate cuIcon" :color="a.myLike?'#EA4D61':''"></text>
                                        </view>

                                        <view class="fle align-center  margin-right" @tap="comment(index)">
                                            <text class="infosl padding-right10"
                                                v-if="a.listComment.length!=0">{{a.listComment.length}}</text>
                                            <text class="cuIcon-comment cuIcon"></text>
                                        </view>
                                        <view class="fle align-center" @tap="deleteDt(index)">
                                            <text class="cuIcon-delete cuIcon"></text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="dtmain">
                            <view class="dttxt" @click="f_godetail(a.id)">
                                {{a.title}}
                            </view>
                            <view class="dtimg" v-if="a.attachment.length!=0">
                                <view class="imgitem" v-for=" (b,$index) in a.attachment" @click="f_aaa(a.id)"
                                    :class="a.attachment.length==1?'img-wrap':''" :key="$index">
                                    <video @play="pauseOther(a.id,index)" loop="true" style="width: 100%;" :id="a.id"
                                        :data-id="a.id" v-if="a.type=='video'" :src="b.url" controls></video>
                                    <image v-else class="img-box" @click="previewImg(b.url,index,$index)" :src="b.url"
                                        mode="aspectFill">
                                    </image>
                                </view>
                                <view class="imgitem" style="visibility: hidden">
                                </view>
                            </view>
                        </view>
                        <view class="post-footer">
                            <view class="footer_content footreline" v-if="a.likelength>0">
                                <text style="color: #36648B;font-size: 38rpx;" class="cuIcon-appreciate cuIcon"></text>
                                <text v-for="(b,$index) in a.listLike" :key="$index" @click="f_gohomepage(b.userId)"
                                    class="nickname">{{b.userName}}</text>
                            </view>
                            <!-- #ifdef H5 -->
                            <view class="footer_content" @tap="reply('',index,$index,comment)"
                                v-for="(comment,$index) in a.listComment" :key="$index"
                                style="display: flex;flex-direction: column;">
                                <view @touchstart.stop="touchstartcomm(comment.id,$index,index)"
                                    @touchend.stop="touchendcomm">
                                    <text class="comment-nickname">{{comment.fromUserName}}: <text
                                            class="comment-content">{{comment.content}}</text></text>
                                </view>
                                <view @touchstart.stop="touchstart(replay.id,i,index,$index)" @touchend.stop="touchend"
                                    v-for="(replay,i) in comment.listCommentReply" :key="i">
                                    <text class="comment-nickname">{{replay.fromUserName}}</text><text>回复</text>
                                    <text class="comment-nickname">{{replay.aimUserName}}:</text>
                                    <text class="comment-content"
                                        style="padding-left: 5rpx;">{{replay.replyContent}}</text>
                                </view>
                            </view>
                            <!-- #endif -->
                            <!-- #ifdef MP-WEIXIN -->
                            <view class="footer_content" @tap="reply('',index,$index,comment)"
                                v-for="(comment,$index) in a.listComment" :key="$index"
                                style="display: flex;flex-direction: column;">
                                <view @touchstart.prevent="touchstartcomm(comment.id,$index,index)"
                                    @touchend.prevent="touchendcomm">
                                    <text class="comment-nickname">{{comment.fromUserName}}: <text
                                            class="comment-content">{{comment.content}}</text></text>
                                </view>
                                <view @touchstart.prevent="touchstart(replay.id,i,index,$index)"
                                    @touchend.prevent="touchend" v-for="(replay,i) in comment.listCommentReply"
                                    :key="i">
                                    <text class="comment-nickname">{{replay.fromUserName}}</text><text>回复</text>
                                    <text class="comment-nickname">{{replay.aimUserName}}:</text>
                                    <text class="comment-content"
                                        style="padding-left: 5rpx;">{{replay.replyContent}}</text>
                                </view>
                            </view>
                            <!-- #endif -->
                        </view>
                    </view>
                    <m-loading :loading="loading" :finished="finished"></m-loading>
                </view>
            </view>
        </view>
        <view class="foot" v-if="showInput" style="position: fixed;bottom: 0;width: 100%;">
            <chat-input @send-message="send_comment" @cancel-message="cancel_message" :focus="focus"
                :placeholder="input_placeholder">
            </chat-input>
        </view>
    </view>
</template>

<script>
    import mLoading from '@/components/m-loading.vue';
    import listMixin from '@/common/mixins/mygrowdata-mixin.js';
    import { timeago, jj, Format } from '@/common/lib/fun.js'
    import {
        storage, isnull
    } from '@/common/lib/fun.js'
    import uCharts from '@/components/u-charts/u-charts.js';
    var _self;
    var canvaRadar = null;
    export default {
        mixins: [listMixin],
        components: {
            mLoading,
        },
        data() {
            return {
                cWidth: '',
                cHeight: 0,
                cHeight1: 0,
                Radardata: [],
                input_placeholder: '评论', //占位内容
                showInput: false, //评论输入框
                index: 0,
                scrollAnimation: false,
                dtdata: {
                    total: 0,
                    page: 1,
                    rows: 5,
                    loading: 'more',
                    finished: false,
                },
                commindex: -1,
                replayindex: -1,
                dtlist: [],
                ColorList: [
                    { title: '活跃大咖', color: '#e54d42', name: 'blue' },
                    { title: '课程达人', color: '#f37b1d', name: 'cyan' },
                    { title: '学术大人', color: '#fbbd08', name: 'green' },
                    { title: '教授', color: '#8dc63f', name: 'blue' },
                    { title: '教改大人', color: '#39b54a', name: 'orange' },
                    { title: '魅力大叔', color: '#007aff', name: 'purple' },
                ],
                rmax: 0,
                cWidth: '',
                cHeight: '',
                pixelRatio: 1,
                textarea: '',
                // userid: '',
                userinfo: {

                },
                usercount: {

                },
            }
        },
        onShow() {
            var t = this
            t.lis = []
            // t.f_loadldt();
            // t._getList();
            t.getServerData();
            // t.loadDtlist();
            var obj = {
                userId: this.userid
            }
            this.$api.req_post('staff_grow/staff/stDynamic/countUser', obj, 'form', false).then(res => {
                if (res.success) {
                    this.usercount = res.result
                }
            })
            let para = {
                id: this.userid
            }
            uni.request({
                url: this.$cfg.commonurl + 'clientUser/findOne',
                data: para,
                method: 'POST',
                header: {
                    'content-type': 'application/x-www-form-urlencoded'//自定义请求头信息
                },
                success: (res) => {
                    console.log(res);
                    this.userinfo = res.data
                }
            });
        },
        onLoad(options) {
            _self = this;
            if (isnull(options.id) == '') {
                _self.userid = _self.$cfg.user().id
            } else {
                _self.userid = options.id
            }

            //#ifdef MP-ALIPAY
            uni.getSystemInfo({
                success: function (res) {
                    if (res.pixelRatio > 1) {
                        //正常这里给2就行，如果pixelRatio=3性能会降低一点
                        //_self.pixelRatio =res.pixelRatio;
                        _self.pixelRatio = 2;
                    }
                }
            });
            //#endif
            this.cWidth = uni.upx2px(750);
            this.cHeight = uni.upx2px(500);
            this.botheight = uni.upx2px(80);
            this.cHeight1 = this.$cfg.h - this.botheight


        },
        // #ifndef MP
        // onNavigationBarButtonTap(e) {
        //     const index = e.index;
        //     if (index === 0) {
        //         this.f_gz();
        //     } else if (index === 1) {

        //     }
        // },
        // #endif
        methods: {
            async _getList() {
                var t = this
                // 根据实际情况修改自己修改key 
                let res = await t.loadData({
                    userId: t.$cfg.user().id,
                    pageNo: t.page,
                    pageSize: t.size,
                });
                if (res.success) {
                    t.total = res.result.total;
                    var newdata = jj(res.result.records)
                    newdata.map(a => {
                        a.attachment = JSON.parse(a.attachment)
                        a.createTime = timeago(a.createTime)
                        a.likelength = a.listLike.length

                    })
                    t.list = t.list.concat(newdata)
                } else {
                    this.$refs.uToast.show({
                        title: '异常错误',
                        type: 'error',
                    })
                }
            },
            loadData(requestParams) {
                let t = this
                return new Promise((res, rej) => {
                    let params = requestParams;
                    if (!params) {
                        params = {
                            userId: t.userid,
                            pageNo: t.page,
                            pageSize: t.size,
                        };
                    }
                    setTimeout(() => {
                        t.$api.req_post('staff_grow/staff/stDynamic/list', params, '', false).then(val => {
                            res(val)
                        })
                    }, 500);
                });

            },
            f_loadldt() {
                var t = this

            },
            touchstartcomm(index, i, dtindex) {
                let t = this;
                t.commindex = i
                clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
                this.Loop = setTimeout(function () {
                    uni.showModal({
                        title: '删除',
                        content: '请问要删除此条评论吗？',
                        success: function (res) {
                            console.log(res);
                            if (res.confirm) {
                                console.log(res.confirm);
                                t.$api.req_post('staff_grow/staff/stComment/delete', { id: index }, 'form', false).then(res1 => {
                                    console.log(res1);
                                    if (res1.success) {
                                        console.log(t.dtlist[dtindex].listComment);
                                        t.dtlist[dtindex].listComment.splice(i, 1);
                                    }
                                })
                                // that.arr = that.arr.filter(item => item != index)
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    });
                }.bind(this), 1000);
            },
            touchendcomm() {
                console.log('结束')
                clearInterval(this.Loop);
            },
            touchstart(index, i, dtindex, $index) {
                let t = this;
                clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
                this.Loop = setTimeout(function () {
                    uni.showModal({
                        title: '删除',
                        content: '请问要删除此条回复吗？',
                        success: function (res) {
                            if (res.confirm) {
                                t.$api.req_post('staff_grow/staff/stCommentReply/delete', { id: index }, 'form', false).then(res1 => {
                                    console.log(res1);
                                    if (res1.success) {
                                        console.log(t.dtlist[dtindex].listComment[$index]);
                                        t.dtlist[dtindex].listComment[$index].listCommentReply.splice(i, 1);
                                    }
                                })
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    });
                }.bind(this), 1000);
            },
            touchend() {
                console.log('结束')
                clearInterval(this.Loop);
            },

            cancel_message(msg) {
                this.showInput = !this.showInput; //调起input框
                if (!this.showInput) {
                    uni.showTabBar()
                } else {
                    uni.hideTabBar()
                }
            },
            scroll() {
                this.loadDtlist();
            },
            loadDtlist(source) {
                var t = this
                // t.dtlist = []
                let navItem = t.dtdata;
                if (navItem.finished) return
                if (navItem.loading == 'loading') {
                    return
                }
                navItem.loading = 'loading';
                //tab切换只有第一次需要加载数据
                if (source === 'tabChange' && navItem.finished) return;
                var obj = {
                    userId: t.userid,
                    pageNo: t.dtdata.page,
                    pageSize: t.dtdata.rows,
                }
                t.$api.req_post('staff_grow/staff/stDynamic/list', obj, 'form', false).then(res => {
                    if (res.success) {
                        var newdata = jj(res.result.records)
                        newdata.map(a => {
                            a.attachment = JSON.parse(a.attachment)
                            a.createTime = timeago(a.createTime)
                            a.likelength = a.listLike.length

                        })
                        t.dtlist = t.dtlist.concat(newdata)
                        navItem.loading = 'more';
                        navItem.total = res.result.total
                        if (navItem.page > parseInt((navItem.total - 1) / navItem.rows)) {
                            navItem.loading = 'nomore';
                            navItem.finished = true
                        }
                        navItem.page++;
                        this.$nextTick(function () {
                            //进入页面滚动到底部
                            // this.scrollTop = 9999;
                            this.$nextTick(function () {
                                this.scrollAnimation = true;
                            });

                        });
                    } else {
                        navItem.loading = 'nomore';
                        t.$refs.uToast.show({
                            title: '异常错误',
                            type: 'error'
                        })
                    }
                })
            },
            f_settint() {
                this.f.nav('/myPackages/pages/setting/setting')
            },
            init_input() {
                this.showInput = false;
                this.focus = false;
                this.input_placeholder = '评论';
                this.is_reply = false;
                this.index = ''
                uni.showTabBar()
            },
            comment(index) {
                this.showInput = !this.showInput; //调起input框
                // uni.hideTabBar()
                if (!this.showInput) {
                    uni.showTabBar()
                } else {
                    uni.hideTabBar()
                }
                this.focus = true;
                this.index = index;
            },
            reply(a, i, index, comment_index) {
                var t = this
                if (a == 'gz') {
                    t.is_gz = true
                } else {
                    t.is_gz = false
                }
                this.is_reply = true; //回复中
                this.showInput = true; //调起input框
                if (!this.showInput) {
                    uni.showTabBar()
                } else {
                    uni.hideTabBar()
                }
                let replyTo = comment_index.fromUserName;
                this.input_placeholder = '回复' + replyTo;
                this.index = i; //post索引
                this.replatindex = index
                this.comment_index = comment_index; //评论索引
                this.focus = true;
            },
            send_comment: function (message) {
                var t = this
                var arr = []
                if (!t.is_gz) {
                    arr = t.dtlist
                } else {
                    arr = t.gzdtlist
                }
                if (t.is_reply) {
                    var obj = {
                        aimUserId: t.comment_index.fromUserId,
                        aimUserName: t.comment_index.fromUserName,
                        aimUserUrl: t.comment_index.fromUserUrl,
                        commentId: t.comment_index.id,
                        fromUserId: t.$cfg.user().id,
                        fromUserName: t.$cfg.user().name,
                        fromUserUrl: t.$cfg.user().userUrl,
                        replyContent: message.content
                    }
                    var obj1 = { content: obj.replyContent }
                    t.$api.req_post('staff_grow/staff/stCommentReply/add', obj, 'json', false).then(res => {
                        if (res.success) {
                            this.showInput = !this.showInput; //调起input框
                            t.dtlist[t.index].listComment[t.replatindex].listCommentReply.push(obj)
                            if (t.is_gz) {
                                t.gzdtlist[t.index].listComment[t.replatindex].listCommentReply.push(obj)
                            } else {
                            }
                            t.is_gz = false
                        }
                        uni.showTabBar()

                    })
                } else {
                    var comment_content = message.content;
                    var obj = {
                        dynamicId: arr[t.index].id,
                        fromUserId: t.$cfg.user().id,
                        fromUserUrl: t.$cfg.user().userUrl,
                        fromUserName: t.$cfg.user().name,
                        content: comment_content
                    }
                    var objcontent = { content: obj.content }
                    t.$api.req_post('staff_grow/staff/stComment/add', obj, 'json', false).then(res => {
                        if (res.success) {
                            this.showInput = !this.showInput; //调起input框
                            t.dtlist[t.index].listComment.push({
                                fromUserId: t.$cfg.user().id,
                                fromUserName: t.$cfg.user().name,
                                fromUserUrl: t.$cfg.user().userUrl,
                                content: comment_content,
                            })
                            if (t.is_gz) {
                                t.gzdtlist[t.index].listComment.push({
                                    fromUserId: t.$cfg.user().id,
                                    fromUserName: t.$cfg.user().name,
                                    fromUserUrl: t.$cfg.user().userUrl,
                                    content: comment_content,
                                })
                            }
                            this.init_input();
                            uni.showTabBar()
                            t.is_gz = false
                        }
                    })
                }
            },
            f_re() {
                uni.navigateBack()
            },
            f_like(i, index) {
                var t = this
                var a = jj(i)
                if (a.myLike) {
                    var obj = {
                        dynamicId: a.id,
                        userId: t.$cfg.user().id,
                    }
                    t.$api.req_post('staff_grow/staff/stLike/cancel', obj, 'form', false).then(res => {
                        if (res.success) {
                            t.dtlist[index].myLike = false
                            t.dtlist[index].likelength--;
                            for (let i = 0; i < t.dtlist[index].listLike.length; i++) {
                                const e = t.dtlist[index].listLike[i];
                                if (e.userId == t.$cfg.user().id) {
                                    t.dtlist[index].listLike.splice(i, 1)
                                }
                            }
                        }
                    })
                } else {
                    var obj = {
                        dynamicId: a.id,
                        userId: t.$cfg.user().id,
                        userName: t.$cfg.user().name,
                    }
                    t.$api.req_post('staff_grow/staff/stLike/add', obj, 'json', false).then(res => {
                        if (res.success) {
                            t.dtlist[index].myLike = true
                            t.dtlist[index].likelength++;
                            t.dtlist[index].listLike.push({
                                dynamicId: a.id,
                                userId: t.$cfg.user().id,
                                userName: t.$cfg.user().name,
                            })
                        }
                    })
                }
            },
            f_gz() {
                var t = this
                if (t.usercount.myFollow) {
                    var obj = {
                        followUserId: t.$cfg.user().id,
                        userId: t.userinfo.id,
                    }
                    t.$api.req_post('staff_grow/staff/stFollow/cancel', obj, 'form', false).then(res => {
                        if (res.success) {
                            t.usercount.myFollow = !t.usercount.myFollow;
                            uni.setNavigationBarColor({
                                frontColor: "#ffffff",	//文字颜色
                                backgroundColor: "#007AFF"	//底部背景色
                            })
                        }
                    })
                } else {
                    var obj = {
                        followUserId: t.$cfg.user().id,
                        followUserNum: t.$cfg.user().userNum,
                        followUserName: t.$cfg.user().name,
                        followUserUrl: t.$cfg.user().userUrl,
                        userId: t.userinfo.id,
                        userName: t.userinfo.name,
                        userNum: t.userinfo.userNum,
                        userUrl: t.userinfo.userUrl,
                    }
                    console.log(obj);
                    t.$api.req_post('staff_grow/staff/stFollow/add', obj, 'json').then(res => {
                        if (res.success) {
                            t.usercount.myFollow = !t.usercount.myFollow;

                        }
                    })
                }
            },
            getServerData() {
                let Radar = {
                    categories: [],
                    series: [
                        {
                            name: "得分",
                            data: []
                        }
                    ]
                };
                this.$api.req_post('staff_grow/staff/stStaffTarget/getDimensionRadarChart', { userId: this.$cfg.user().id }, 'form', false).then(res => {
                    this.Radardata = res.result
                    res.result.map(a => {
                        let name1 = a.name.split('-');
                        if (isnull(name1[1]) == '') {
                            Radar.categories.push(name1[0]);
                        } else {
                            Radar.categories.push(name1[1]);
                        }

                        Radar.series[0].data.push(a.score)

                    })
                    this.rmax = Math.max(...Radar.series[0].data) + 3
                    _self.showRadar("canvasRadar", Radar);
                })
            },
            f_gohomepage(id) {
                console.log(id);
                var t = this
                if (Number(id) == t.$cfg.user().id) {
                    uni.switchTab({
                        url: '/pages/my/my'
                    });
                } else {

                    uni.navigateTo({
                        url: `/perPackages/pages/PerHomepage/PerHomepage?id=${id}`
                    })
                }
            },
            showRadar(canvasId, chartData) {
                canvaRadar = new uCharts({
                    $this: _self,
                    canvasId: canvasId,
                    type: 'radar',
                    fontSize: 11,
                    padding: [15, 15, 0, 15],
                    legend: {
                        show: false,
                        padding: 5,
                        lineHeight: 11,
                        margin: 0,
                    },
                    background: '#FFFFFF',
                    pixelRatio: _self.pixelRatio,
                    animation: true,
                    dataLabel: true,
                    categories: chartData.categories,
                    series: chartData.series,
                    width: _self.cWidth * _self.pixelRatio,
                    height: _self.cHeight * _self.pixelRatio,
                    extra: {
                        radar: {
                            max: this.rmax//雷达数值的最大值
                        }
                    }
                });
            },
            deleteDt(i) {
                let t = this
                t.f.comfirm('是否删除？', _ => {
                    t.$api.req_post('staff_grow/staff/stDynamic/delete', { id: t.list[i].id }, 'form', false).then(res => {
                        if (res.success) {
                            // t.dtlist.splice(i, 1)
                            t.page = 1
                            t.list = []
                            t.dtdata.finished = false
                            t._getList();
                        }
                    })
                })
            },
            touchRadar(e) {
                canvaRadar.touchLegend(e);
                canvaRadar.showToolTip(e, {
                    format: function (item) {
                        console.log(item);
                        return item.name + ':' + item.data
                    }
                });
            },
        }
    }
</script>

<style lang="scss" scoped>
    .homepage {
        height: 100%;

        background-color: #ffffff;
    }

    .a-a:after {
        position: absolute;
        z-index: 3;
        left: 0;
        right: 0;
        width: 2px;
        background-color: #FFFFFF;
        height: 60%;
        content: '';
        transform: scaleX(.7);
        // border-bottom: 1px solid $uni-bg-color;
    }


    .useravantor {
        padding-top: 20rpx;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .ele {
        position: relative;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 220upx;
        height: 220upx;
        background-color: rgba(217, 207, 207, 0.2);
        // opacity: 0.5;
        border-radius: 50%;
    }

    .child {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 140upx;
        height: 140upx;
        border-radius: 50%;
        background: hsla(0, 0%, 100%, .6);
        // opacity: 0.5;
        // background: #ddd3d1;
        position: relative;
    }

    .child2 {
        width: 100upx;
        height: 100upx;
        border-radius: 50%;
        position: relative;

        image {
            width: 100upx;
            height: 100upx;
            border-radius: 50%;
        }
    }

    .gzfshz {
        display: flex;
        position: relative;
        justify-content: center;
        padding-top: 40upx;

        .gz {
            position: relative;
            padding: 0 60upx;
            display: flex;
            color: #FFFFFF;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            text {
                font-size: $uni-font-size-lg;
            }
        }
    }

    .cu-bar .content {
        /* color: #FFFFFF; */
    }

    .cu-bar {
        // filter: blur(10px);
        // opacity: .8;
        // opacity: 0.3;
        position: relative;

        .headerbg {
            position: absolute;
            left: 0;
            top: 0;
            width: 100% !important;
            height: 100% !important;
        }

        // background-position: 0 100upx;
        // min-height: 80upx!important;
        // background-image: url(../../static/img/big10001.jpg);
        // background-image: url(../../static/img/cjk.jpg);
    }

    .re {
        .cuIcon-back {
            font-size: $uni-font-size-lg+20rpx !important;
        }
    }

    .cuIcon-like {
        font-size: $uni-font-size-lg+20rpx !important;
        color: #FFFFFF;
    }

    .qiun-charts {
        width: 750upx;
        height: 500upx;
        background-color: #FFFFFF;
    }

    .charts {
        width: 750upx;
        height: 500upx;
        background-color: #FFFFFF;
    }

    .perpagebg {
        background: linear-gradient(to bottom, #394449 0%, #776d68 100%);
        /* height: 650upx; */
        position: relative;
        width: 100%;

        // opacity: 0.8;
        .bg {
            position: absolute;
            left: 0;
            top: 0;
            width: 100% !important;
            height: 100% !important;
            // filter: blur(1px);
            // opacity: .8;
        }

        .user-info-box {
            padding-top: 50upx;
            height: 180upx;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 1;
            color: #FFFFFF;

            .name {
                font-size: $uni-font-size-lg;
            }

            .bmzw {
                padding-top: 40upx;
                font-size: $uni-font-size-base;
            }

            .xx {
                // padding-top: 20upx;
                font-size: $uni-font-size-base;
            }
        }

        // background-size: 100% 100%;
        // background-image: url(../../static/img/big10001.jpg);
    }

    .dtlist {
        .dtitem {
            position: relative;
            padding: 20rpx 30rpx 0 30rpx;
            // padding: 20upx 30upx;

            .itemleft {
                display: flex;

                .dtinfo {
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    padding-left: 20upx;
                    flex: 1;

                    .dtr {
                        display: flex;
                        justify-content: space-between;

                        .dtrl {
                            display: flex;
                        }

                        .dtrr {
                            align-items: center;
                            display: flex;

                            .dzsl {
                                font-size: $uni-font-size-base;
                                font-weight: 700;
                                color: #818B9D;
                            }

                            .iconfont-xin {
                                color: red;
                            }

                            .infosl {
                                font-size: $uni-font-size-base;
                                font-weight: 700;
                                color: #818B9D;
                            }

                            .iconfont-info {
                                color: #818B9D;
                            }
                        }

                        .name {
                            font-size: 28rpx;
                            color: #4A4F62;
                            font-weight: bold;
                            // padding-left: 10rpx;
                        }

                        .hg {
                            width: 20px;
                            height: 20px;
                            border-radius: 50%;
                            background-color: #F8C01C;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            margin-left: 6upx;

                            .iconfont-hg {
                                color: #FFFFFF;
                            }
                        }
                    }

                    .sjdd {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        padding-top: 6rpx;

                        text {
                            color: #818B9D;
                            font-size: 24rpx;
                        }

                        .graydot {
                            margin: 0 8upx;
                            height: 4upx;
                            width: 4upx;
                            border-radius: 50%;
                            background-color: #4A4F62;
                        }
                    }
                }
            }

            .dtmain {
                padding-top: 20upx;

                .dttxt {
                    word-break: break-all;
                    color: #4A4F62;
                    padding: 10rpx 22rpx;
                    -webkit-box-pack: justify;
                    -webkit-justify-content: space-between;
                    justify-content: space-between;
                    font-size: $uni-font-size-base;
                    text-align: justify;


                }

                .dttxt:first-letter {
                    /* color: uni-text-color-dep;
                    font-size: $uni-font-size-lg+20rpx; */
                }

                .dtimg {

                    padding: 10rpx 22rpx;
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;

                    .imgitem {
                        width: 49%;
                        // margin: 10upx 0;  
                        // margin: 10upx;

                        image {
                            width: 100% !important;
                            // height: 300upx;
                        }
                    }
                }
            }

            .post-footer {
                /* margin-top: 10upx; */

                width: 100%;

                .footer_content {
                    padding: 0rpx 22rpx;
                    // background-color: #f3f3f5;
                    /* padding: 10upx 0 10upx 10upx; */
                    position: relative;
                    /* display: -webkit-box;
                    display: -webkit-flex;
                    display: -ms-flexbox; */
                    display: flex;
                    /* -webkit-box-align: center;
                    -webkit-align-items: center;
                    -ms-flex-align: center; */
                    /* align-items: center; */
                    -webkit-flex-wrap: wrap;
                    -ms-flex-wrap: wrap;
                    flex-wrap: wrap;

                    .comment-nickname {
                        color: #36648B;
                        font-size: $uni-font-size-base
                    }

                    .comment-content {
                        color: #000000;
                        font-size: $uni-font-size-base
                    }

                    .nickname {
                        padding-left: 10rpx;
                        color: #36648B;
                        font-size: $uni-font-size-base
                    }
                }

            }
        }

        .dtitem::after {
            position: absolute;
            z-index: 3;
            right: 0;
            bottom: 0;
            left: 0;
            height: 1px;
            content: '';
            -webkit-transform: scaleY(.2);
            transform: scaleY(.2);
            background-color: #c8c7cc;
        }
    }

    .qiun-charts {
        width: 750upx;
        height: 500upx;
        background-color: #FFFFFF;
    }

    .charts {
        width: 750upx;
        height: 500upx;
        background-color: #FFFFFF;
    }
</style>